﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="Css/style.css" rel="stylesheet" type="text/css" />
    <link href="Css/colorpicker.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
    <script src="Js/themer.js" type="text/javascript"></script>
    <script src="Js/colorpicker-min.js" type="text/javascript"></script>
    <style type="text/css">
        /*OVERWRITE STYLE*/
        body
        {
            background-color: #000;
            
        }
        
        #content
        {
            background-image: url(images/circuit.png);
        }
        div#head, div.bg-sidebar, div#content .bloc .title, div#footer
        {
            background-color: #380400;
        }
        
        div#content .bloc .title, div#head a, div#footer p
        {
            color: #ffffff;
        }
    </style>
</head>
<body>
    <div id="themer">
        <div id="themer-content">
            <div id="themer-toggle">
            </div>
            <div id="themer-content-content">
                <div>
                    <textarea rows="5" id="viewCSS"></textarea>
                </div>
                <div id="theme-presets-container" class="themer-section">
                    <label for="theme-presets">
                        Color Presets</label>
                </div>
                <div class="themer-separator">
                </div>
                <div id="theme-pattern-container" class="themer-section">
                    <label for="theme-patterns">
                        Background</label>
                </div>
                <div class="themer-separator">
                </div>
                <div class="themer-section">
                    <ul>
                        <li class="clearfix"><span>Base Color</span>
                            <div id="base-cp" class="cp-trigger">
                            </div>
                        </li>
                        <li class="clearfix"><span>Background color</span>
                            <div id="Background-cp" class="cp-trigger">
                            </div>
                        </li>
                        <li class="clearfix"><span>Highlight Color</span>
                            <div id="highlight-cp" class="cp-trigger">
                            </div>
                        </li>
                        <li class="clearfix"><span>Text Color</span>
                            <div id="text-cp" class="cp-trigger">
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="themer-separator">
                </div>
                <div class="themer-section">
                    <input type="button" id="themer-getcss" value="Get CSS" />
                    <input type="button" id="themer-savecss" value="save theme" />
                </div>
            </div>
            <div id="themer-css-dialog">
                <form class="form">
                <div class="form-row">
                    <div class="form-item">
                        <textarea cols="auto" rows="auto" readonly="readonly"></textarea>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
    <!-- head-->
    <div id="head">
        <div class="wrap">
            <div class="logo">
                logo</div>
            <div class="account">
                <a href="#" class="button profile">
                    <img src="Images/huser.png" alt=""></a> Hi, <a href="#">John Doe</a> | <a href="#">Logout</a>
            </div>
        </div>
    </div>
    <!-- end head-->
    <div class="wrap">
        <!-- sidebar-->
        <div class="bg-main">
        </div>
        <div class="bg-sidebar">
        </div>
        <div id="sidebar">
            <ul class="accordion">
                <li id="one" class="home"><a href="#one">My Home</a> </li>
                <li id="one" class="article"><a href="#one">Article<span>495</span></a>
                    <ul class="sub-menu">
                        <li><a href="#"><em>01</em>Dropbox<span>42</span></a></li>
                        <li><a href="#"><em>02</em>Skydrive<span>87</span></a></li>
                        <li><a href="#"><em>03</em>FTP Server<span>366</span></a></li>
                        <li><a href="#"><em>04</em>Dropbox<span>1</span></a></li>
                        <li><a href="#"><em>05</em>Skydrive<span>10</span></a></li>
                    </ul>
                </li>
                <li id="three" class="account"><a href="#three">account<span>58</span></a>
                    <ul class="sub-menu">
                        <li><a href="#"><em>01</em>Connect<span>12</span></a></li>
                        <li><a href="#"><em>02</em>Profiles<span>19</span></a></li>
                        <li><a href="#"><em>03</em>Options<span>27</span></a></li>
                        <li><a href="#"><em>04</em>Connect<span>12</span></a></li>
                        <li><a href="#"><em>05</em>Profiles<span>19</span></a></li>
                        <li><a href="#"><em>06</em>Options<span>27</span></a></li>
                    </ul>
                </li>
                <li id="four" class="setting"><a href="#four">Sign Out</a>
                    <ul class="sub-menu">
                        <li><a href="#"><em>01</em>Log Out</a></li>
                        <li><a href="#"><em>02</em>Delete Account</a></li>
                        <li><a href="#"><em>03</em>Freeze Account</a></li>
                    </ul>
                </li>
            </ul>
            <script type="text/javascript">

                $(document).ready(function () {

                    // Store variables

                    var accordion_head = $('.accordion > li > a'),
				accordion_body = $('.accordion li > .sub-menu');

                    // Open the first tab on load

                    accordion_head.first().addClass('active').next().slideDown('normal');

                    // Click function

                    accordion_head.on('click', function (event) {

                        // Disable header links

                        event.preventDefault();

                        // Show and hide the tabs on click

                        if ($(this).attr('class') != 'active') {
                            accordion_body.slideUp('normal');
                            $(this).next().stop(true, true).slideToggle('normal');
                            accordion_head.removeClass('active');
                            $(this).addClass('active');
                        }

                    });

                });

            </script>
        </div>
        <!-- end sidebar-->
        <!-- content-->
        <div id="content" class="white">
            <h1>
                <img src="Images/posts.png" alt="">
                Dashboard
            </h1>
            <div class="bloc left">
                <div class="title">
                    Dashboard <a href="#" class="toggle"></a>
                </div>
                <div class="content dashboard">
                    <div class="center" style="width: auto; display: block;">
                        <a href="#" class="shortcut">
                            <img src="Images/page.png" alt="" width="48" height="48">
                            Write an Article </a><a href="#" class="shortcut">
                                <img src="img/picture.png" alt="" width="48" height="48">
                                Write an Article </a><a href="#" class="shortcut">
                                    <img src="img/contact.png" alt="" width="48" height="48">
                                    Manage contacts </a><a href="#" class="shortcut last">
                                        <img src="img/event.png" alt="" width="48" height="48">
                                        Manage events </a>
                        <div class="cb">
                        </div>
                    </div>
                    <p>
                        Icons by <a href="http://icondrawer.com">icondrawer.com</a></p>
                </div>
            </div>
            <div class="bloc right">
                <div class="title">
                    Select and Textarea<a href="#" class="toggle"></a></div>
                <div class="content">
                    <div class="input">
                        <label for="select">
                            This is a "select" input</label>
                        <div class="selector" id="uniform-select">
                            <span>First value</span><select name="select" id="select" style="opacity: 0;">
                                <option value="1">First value</option>
                                <option value="2">Second value</option>
                                <option value="3">Third value</option>
                            </select></div>
                        Some informations on how to use this field
                    </div>
                    <div class="input textarea">
                        <label for="textarea1">
                            Textarea</label>
                        <textarea name="text" id="textarea1" rows="7" cols="4"></textarea>
                    </div>
                    <div class="submit">
                        <input type="submit" value="Enregistrer">
                        <input type="reset" value="Black button" class="black">
                        <input type="reset" value="White button" class="white">
                    </div>
                </div>
            </div>
            <div class="cb">
            </div>
            <div class="bloc">
                <div class="title">
                    What's new<a href="#" class="toggle"></a></div>
                <div class="content">
                    <h5>
                        10/10/2011</h5>
                    <ul>
                        <li>New minify system, you can now do change to Javascript sourcecode and generates
                            a minfiy version after all using <a href="lib/minify/b=app/webroot/demo/coreadmin/js&amp;f=cookie/jquery.cookie.js,jwysiwyg/jquery.wysiwyg.js,tooltipsy.min.js,iphone-style-checkboxes.js,excanvas.js,zoombox/zoombox.js,visualize.jQuery.js,jquery.uniform.js,main.js">
                                this link</a> </li>
                        <li>New alert messages</li>
                        <li>CSS Merged into one CSS</li>
                        <li>New input "loading" added to display a loading state on a specific field</li>
                        <li>Fixed a bug caused by "Console.log" that broke charts on Internet Explorer</li>
                        <li>Fixed a bug with uniform plugin that doesn't work with jQuery 1.6 (attr('checked')
                            replaced by is(':checked')</li>
                        <li>A new element (class "logo") allow you to add your own branding in the head (your
                            logo has to be 42 pixel high</li>
                        <li>The left sidebar can be collapsed !</li>
                    </ul>
                    <h5>
                        09/08/2011</h5>
                    <ul>
                        <li>Minor CSS bug fixes</li>
                        <li>New gallery template</li>
                        <li>New tabs code, the new code uses jQuery.cookie to remember what tab was opened</li>
                        <li>Minified CSS and Minified Javascript is now include, no need to include 200 scripts
                            anymore</li>
                        <li>Infinite sublevel for left sidebar (thanks @sscowden for suggestion)</li>
                    </ul>
                    <h5>
                        01/07/2011</h5>
                    <ul>
                        <li>Fixed path for CSS and Javascript files on HTML demos</li>
                        <li>Charts script updated, you can now add tooltips using ‘tips’ class on table</li>
                    </ul>
                    <h5>
                        16/06/2011</h5>
                    <ul>
                        <li>Completely reworked substyles system, you have now 3 sidebars styles, 2 body styles
                            and 3 bloc styles. Wood styles completely reworked.</li>
                        <li>Added icons so you don’t have to look for icons</li>
                        <li>Added galllery system</li>
                        <li>Settings pannel added on the demo so you can test substyles easily</li>
                        <li>Modal style added, so you can open subpages within modal boxes</li>
                        <li>Fixed a bug on page that didn’t have title</li>
                    </ul>
                    <h5>
                        06/06/2011</h5>
                    <ul>
                        <li>Fixed a bug on menu links with submenu</li>
                        <li>Added some styles on datepicker (now “today” and “current day” have different style)</li>
                    </ul>
                </div>
            </div>
            <div class="bloc">
                <div class="title">
                    Shortcuts <a href="#" class="toggle"></a>
                </div>
                <div class="content">
                    <a href="index.php?p=typo" class="shortcut">
                        <img src="img/icons/font.png" alt="">
                        Typography </a><a href="index.php?p=table" class="shortcut">
                            <img src="img/icons/window.png" alt="" width="32" height="32">
                            Table </a><a href="index.php?p=notif" class="shortcut">
                                <img src="img/icons/warning.png" alt="" width="32" height="32">
                                Notifications </a><a href="index.php?p=forms" class="shortcut">
                                    <img src="img/icons/posts.png" alt="" width="32" height="32">
                                    Forms </a><a href="index.php?p=charts" class="shortcut">
                                        <img src="img/icons/chart.png" alt="" width="32" height="32">
                                        Charts </a><a href="index.php?p=calendar" class="shortcut">
                                            <img src="img/icons/calendar.png" alt="" width="32" height="32">
                                            Calendar </a>
                    <div class="cb">
                    </div>
                </div>
            </div>
        </div>
        <!-- end content-->
    </div>
    <div id="footer">
        <div class="wrap">
            <p>
                @2012 BigShare Tran</p>
        </div>
    </div>
</body>
</html>
